<template>
  <div class="content" v-loading="infoLoading">
<!--    零活详情-->
    <template v-if="info.name&&info.describe!=''">
      <div class="left-block">
        <!--      <div class="left-top-block" @click="skip1()">-->
        <div class="left-top-block">

          <div class="post-top">
            <div class="post-top-item">
              <div class="post-title">
                {{ info.name }}
              </div>
              <div class="small-title">
                {{ info.process_status_text }}
              </div>
            </div>
            <div class="post-pay">
              {{ info.price }}
              <span>元/{{ info.unit_text }}</span>
            </div>
          </div>
          <div class="time">开工日期：
            {{ info.start_time }}
          </div>
          <div class="odd-job-count">
            <div class="people-count">
              {{ info.population }}人
            </div>
            <div class="number-mark" v-if="info.unit_text=='天'">
              {{ info.price }}/天
            </div>
            <div class="number-mark" v-if="info.unit_text=='时'">
              {{ info.duration }}时
            </div>
          </div>
        </div>
        <div class="left-middle-block">
          <div class="title">
            工作地点
          </div>
          <div class="location">
            <div class="site">
              {{ info.address }}
            </div>
            <div class="map" @click="openMsg()">
              <img src="@/./assets/Supermarket/site.png" alt="">
              <span>地图</span>
            </div>
          </div>
        </div>
        <div v-if="isShow" style="
            width: 100%;height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;"
        >
          <div style="width: 100%;height: 100%;position:absolute;" @click="closeMsg()"></div>
          <div class="map1">
            <div class="title" style="display: flex;justify-content: space-between">工作地点
              <div class="site" style="font-size: 20px;color: #000">
                {{ info.jobAddress }}
              </div>
              <div class="img" @click="closeMsg()">
                <img src="@/assets/Recruitment/close.png" alt="">
              </div>
            </div>
            <div id="contain"></div>
          </div>
        </div>
        <!--      <div class="left-bottom-block">-->
        <!--        <div class="title">-->
        <!--          联系电话-->
        <!--        </div>-->
        <!--        <div class="contact-info">-->
        <!--          王女士  18298702023-->
        <!--        </div>-->
        <!--      </div>-->
      </div>
      <div class="middle-block" v-if="describeLength>300">
        <div class="title">工作描述</div>
        <div class="text" style="overflow-y: scroll;height: 450px">
          {{ info.describe }}
        </div>
      </div>
      <div class="middle-block" v-else>
        <div class="title">工作描述</div>
        <div class="text">
          {{ info.describe }}
        </div>
      </div>
      <div class="right-block">
        <div class="right-top-block">
          <div class="title">
            工作环境
          </div>
          <div class="environment">
            <div v-if="info.attachment.length==1">
              <img :src="info.attachment" alt="">
            </div>
            <div v-else>
              <img :src="info.attachment[0]" alt="">
              <img :src="info.attachment[1]" alt="">
              <img :src="info.attachment[2]" alt="">
            </div>
            <!--          <img src="@/assets/Supermarket/huanjing.jpg" alt="">-->
          </div>
        </div>
        <div class="right-bottom-block">

          <div class="info">
            <img :src="info.department.logo?info.department.logo:'暂无'" alt="">
<!--            <img src="" alt="">-->
            <div class="company-info">
              <div class="company-title">
                {{ info.department.name }}
              </div>
              <div class="small-title">
                ⽤⼯⽅ {{ info.department.employer_score }} ·零⼯⽅ {{ info.department.workers_score }}
              </div>
            </div>
          </div>
          <div style="display: flex;align-items: center">
            <el-popover
                placement="top-start"
                title="电话"
                width="200"
                trigger="click"
            >
              {{info.user.phone_number}}
              <el-button slot="reference">
                <div class="map">
                  <img src="@/./assets/Recruitment/./iphone.png" alt="">
                  <span>联系ta</span>
                </div></el-button>
            </el-popover>
            <div  @click="skip()">
              <img class="img" src="@/assets/Supermarket/more.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </template>
    <el-empty v-else class="not-available" style="position: absolute;left: 50%;top: 50%;transform: translate(-160px,50px)"></el-empty>
  </div>
</template>

<script>
import {publicWorkDetailApi} from "@/api/supermarket";
export default {
  name: "JobDetail",
  data(){
    return{
      isShow:false,
      text: '',
      info:{
        enterprise:{
          name:'暂无'
        }
      },
      infoLoading:false
    }
  },
  methods:{
    skip1(){
      this.$router.push({ name: 'OddJobDetail' })
    },
    skip(){
      this.$router.push({ name: 'CompanyDetail',query:{id:this.info.department_id} })
    },
    openMsg(){
      this.isShow = true
      this.$nextTick(()=>{
        this.initMap()
      })
    },
    closeMsg(){
      this.isShow = false
    },
    getPublicWorkDetail() {
      this.infoLoading = true
      const id = this.id
      publicWorkDetailApi(id).then((res) => {
        this.info = res;
        console.log(typeof this.info.attachment)
      }).finally(()=>{
        this.infoLoading = false
      })
    },
    initMap() {
      //定义地图中心点坐标
      var center = new window.TMap.LatLng(this.info.latitude, this.info.longitude)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('contain'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45    //设置地图旋转角度
      });
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          // mark样式
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 38,
            "anchor": { x: 12, y: 32 },
          })
        },
        geometries: [{
          "id": 'demo1',
          "styleId": 'marker',
          "position": new TMap.LatLng(this.info.latitude, this.info.longitude),
          "properties": {
            "title": this.info.jobAddress,
            "address": this.info.jobAddress,
          }
        }]
      });
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(this.info.latitude, this.info.longitude),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`<div style="white-space:
          nowrap;margin:10px;color:#000;text-align:left;">
          <p style="font-size:16px;">${evt.geometry.properties.title}</p>
           </div>`);//设置信息窗内容
      })
    },
  },
  computed:{
    describeLength:function (){
      return this.info.describe.length
    },
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getPublicWorkDetail()
  }

}
</script>

<style lang="scss" scoped>
.content{
  //display: flex;
  box-sizing: border-box;
  width: 800px;
  //height: 575px;
  border-radius: 20px;
  margin: 20px auto;
  //background-color: #fff;
  ::v-deep{
    .el-button{
      border: none;
    }
    .el-popover{
      border: none;
    }
  }
  .map1{
    position: relative;
    width: 100%;
    height: 35%;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px;
    .img{
      width: 3%;
      height: 75%;
      margin-right: 20px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .title{
      text-align: left;
      margin: 10px 10px 30px 10px;
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
  }

  .left-block{
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    //margin-left: 20px;
    .left-top-block{
      width: 100%;
      height: 43%;
      box-sizing: border-box;
      padding: 20px 20px;
      border-radius: 15px;
      background-color: #fff;
      margin-right: 10px;
      .post-top{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .post-top-item{
          display: flex;
          .post-title{
            width: 90px;
            font-size: 18px;
            padding-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .small-title{
            text-align: center;
            box-sizing: border-box;
            width: 70px;
            height: 27px;
            font-size: 18px;
            color: #5795F3;
            margin: 5px 0 0 10px;
            padding-left: 3px;
            border-radius: 10px;
            border: 1px solid #5795F3;
          }
        }

        .post-pay{
          width: 150px;
          font-size: 18px;
          color: #5493F3;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-top: 7px;

          span{
            font-size: 18px;
            margin-left: -5px;
          }
        }
      }
      .time{
        font-size: 20px;
        margin-top: 20px;
        width: 220px;
        height: 26px;
        overflow: hidden;
      }
      .odd-job-count{
        display: flex;
        .people-count{
          width: 100px;
          height: 30px;
          border-radius: 15px;
          background-color: #C8DCFB;
          color: #498CF3;
          margin: 20px 15px 0 0;
          text-align: center;
          line-height: 30px;
        }
        .number-mark{
          width: 100px;
          height: 30px;
          border-radius: 15px;
          background-color: #C8DCFB;
          color: #498CF3;
          margin: 20px 0 0 0;
          text-align: center;
          line-height: 30px;
        }

      }
    }
    .left-middle-block{
      width: 100%;
      height: 25%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      background-color: #fff;
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .location{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: 20px;
        text-align: center;
        font-size: 20px;
        .site{
          width: 262px;
          line-height: 37px;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .map{
          display: flex;
          justify-content: center;
          box-sizing: border-box;
          width: 130px;
          height: 40px;
          line-height: 37px;
          color: #498CF3;
          border: 1px solid #498CF3;
          border-radius: 20px;
          box-shadow: 0px 4px 0px 0px #e5e5e5;
          span{
            margin-bottom: 10px;
          }
          img{
            margin: 7px 0 0 0;
            width: 25px;
            height: 25px;
          }
        }
      }
    }
    .left-bottom-block{
      width: 100%;
      height: 25%;
      //height: 120px;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      margin-top: 20px;
      background-color: #fff;
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .contact-info{
        margin-top: 20px;
      }
    }
  }
  .middle-block{
    width: 100%;
    margin: 20px 0;
    background-color: #fff;
    padding: 20px 20px;
    border-radius: 15px;
    box-sizing: border-box;

    .title{
      color: #498CF3;
      font-size: 26px;
      font-weight: 900;
    }
    .text{
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
      line-height: 40px;
      margin-top: 25px;
    }
  }
  .right-block{
    width: 100%;
    //margin-left: 20px;
    border-radius: 15px;
    box-sizing: border-box;
    .right-top-block{
      width: 100%;
      height: 72%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      background-color: #fff;
      .title{
        color: #498CF3;
        font-size: 26px;
        font-weight: 900;
      }
      .environment{
        display: flex;
        flex-wrap: wrap;
        margin-top: 25px;
        width:100%;
        height: calc((100% - 60px)/1);
        img{
          width:31%;
          height: 40%;
          border-radius: 15px;
          margin: 0 10px 10px 0;
        }
      }

    }
    .right-bottom-block{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 25%;
      padding: 20px 20px;
      box-sizing: border-box;
      border-radius: 15px;
      margin-top: 18px;
      background-color: #fff;
      .map{
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        width: 130px;
        height: 40px;
        line-height: 37px;
        color: #498CF3;
        border: 1px solid #498CF3;
        border-radius: 20px;
        box-shadow: 0px 4px 4px 0px #e5e5e5;
        span{
          margin-bottom: 10px;
        }
        img{
          margin: 8px 5px 0 0;
          width: 23px;
          height: 23px;
        }
      }
      img{
        width: 75px;
        height: 75px;
        border-radius: 60px;
        margin-right: 15px;
      }
      .img{
        width: 30px;
        height: 30px;
        //margin-left: 133px;
        margin-top: 10px;

      }
      .info{
        display: flex;
        box-sizing: border-box;
        .company-info{
          display: flex;
          flex-direction: column;
          justify-content: center;
          .company-title{
            font-weight: 500;
          }
          .small-title{
            margin-top: 10px;
          }
        }

      }
    }
  }
}
</style>
